<%--
  Created by IntelliJ IDEA.
  User: 谢兴鑫
  Date: 2022/5/26
  Time: 下午 04:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>信息表</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/layui/css/layui.css"/>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/layui/layui.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/ajaxForm.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/echarts.min.js"></script>

</head>
<body>


<div class="layui-tab">
    <ul class="layui-tab-title">
        <li>统计表</li>
        <li class="layui-this">统计图</li>
    </ul>
    <div class="layui-tab-content">
        <div class="layui-tab-item">
            <table class="layui-table" id="demo" lay-filter="demo" lay-size="sm"
                   lay-data="{url:'${pageContext.request.contextPath}/stuhdaycount/stuhdaycountList',page:true,id:'demo'}">
                <thead>
                <tr>
                    <th lay-data="{field:'stuName',sort:true,align:'center'}">姓名</th>
                    <th lay-data="{field:'count',sort:true,align:'center'}">请假次数</th>
                </tr>
                </thead>
            </table>
        </div>
        <div class="layui-tab-item layui-show">
            <div id="main" style="width: 800px;height:300px;"></div>
        </div>
    </div>
</div>

<script>

    $(document).ready(function () {
        //echarts进行初始化
        var myChart = echarts.init(document.getElementById("main"));
        myChart.setOption({
            xAxis: {
                type: 'category',
                data: []
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    data: [],
                    color: ['#67ffe2'],//设置图像颜色
                    type: 'bar'
                }
            ]
        });
        //使用jQuery中的$.get()获取data.json文件，使用done函数;
        //done(function(data))中data表示调用的函数返回的数据
        $.get('${pageContext.request.contextPath}/stuhdaycount/countMap').done(function (data) {
            myChart.setOption({
                xAxis: {
                    data: data.stuName
                },
                series: {
                    name: '销量',
                    data: data.countNum
                }
            });
        });
    });
</script>

</body>
</html>
